<template>
  <div class="search-input-wrapper">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @update:model-value="onUpdate"
      />
    </form>
  </div>
  <div class="search-content-wrapper" v-if="value && searchFilterList.length">
    <template v-for="item in searchFilterList" :key="item.id">
      <router-link :to="`/searchDetail/${item.id}`">
        <div class="search-content-item-box">
          <van-image
            :src="item.img"
            lazy-load
            icon-size="30.4vw"
            fit="fill"
            width="30.4vw"
            height="20.26vw"
          >
          </van-image>
          <div class="search-content-item-right-box">
            <div class="search-content-item-name">{{ item.name }}</div>
            <div class="search-content-item-price">{{ item.price }}</div>
          </div>
        </div>
      </router-link>
    </template>
  </div>
  <!-- {{searchFilterList}} -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item.id">{{ item.name }}</van-cell>
  </van-list>
</template>

<script>
import { ref, toRefs, computed, watch } from "vue";
import { Toast } from "vant";
import _ from "lodash";
// import _ from "lodash/core";
import "default-passive-events";
export default {
  props: ["searchFilterList"],
  emits: {
    changeQuery: null,
  },
  setup(props, context) {
    const { searchFilterList } = props;
    const value = ref("");
    const timer = ref(0);
    const enterSearch = () => {
      // console.log(value.value);
      context.emit("changeQuery", value.value);
    };
    //防抖
    const debounce = (func, delay) => {
      clearTimeout(timer.value);
      timer.value = setTimeout(() => {
        func();
      }, delay);
    };
    const onUpdate = () => {
      debounce(enterSearch, 500);
    };
    const onSearch = () => {
      enterSearch();
    };

    const onCancel = () => Toast("取消");
    //List
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const count = ref(0);
    watch(value, (value, prevValue) => {
      list.value = [];
      count.value = 0;
      console.log(list.value, count.value, props.searchFilterList);
      
    });
    watch(searchFilterList, (value, prevValue) => {
     console.log("+1");
    });

    const searchFilterList2 = computed(() => searchFilterList)
    const onLoad = () => {
      console.log(searchFilterList, "---");
      // if (value.value) {
      setTimeout(() => {
        for (let i = count.value; i < 10 + count.value; i++) {
          // console.log(searchFilterList.slice(0,10));
          list.value.push(searchFilterList[i]);
        }
        count.value += 10;

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= searchFilterList.length) {
          finished.value = true;
        }
      }, 1000);
      // }
    };
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求

    return {
      value,
      onSearch,
      onCancel,
      onUpdate,
      list,
      onLoad,
      loading,
      finished,
    };
  },
};
</script>

<style lang="scss">
.search-content-wrapper {
  .search-content-item-box {
    display: flex;
    /* height: 76vw/375*100; */
    padding: 0 14vw/375 * 100;
    .search-content-item-right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 8vw/375 * 100;
    }
  }
}
</style>